<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title></title>
	<!-- <script type="text/javascript" src="https://unpkg.com/vue@3.0.0-beta.17/dist/vue.global.js"></script>
	<style> -->
		
	<script src="vue.beta.js"></script>
	</style>
</head>

<body>
	<div id="app">
		<div  v-text="message + '212'">
		
		</div>
		<div v-text="message1">

		</div>
		
		<div class="container" v-html="message2"></div>

		<img src="https://img.mukewang.com/szimg/5ed0e7f409a33c9d08060364.jpg" >
		<a v-bind:[attr+'f']="message" v-bind:[attr]="message" v-bind:href="aurl" :data="aurl">点击</a>
		<div>----------</div>

		<div v-on:click="handle">点击监听</div>
		<div @click="handle1">点击简写</div>
		<div>---------------</div>
		<div>
			<span>条件渲染</span>
			<div>
				<div v-if="flag" v-text="message"></div>
				<div v-else>{{message}} -- else</div>
				<div v-show="flag"  v-text="message1"></div>
			</div>
		</div>
		<div>----------</div>
		<div>
			<span>列表渲染</span>
			<!-- <ul v-for="item, index in list"> -->
			<!-- v-for 打在哪个标签上,就循环哪个标签  -->
			<ul v-for="(item, index) in list">
				<li>{{item}}</li>--- {{index}}
			</ul>

			<span>对象渲染</span>

			<ul v-for="(value, key, index) of book">
				<li>{{value}} -- {{key}} -- {{index}}</li>
			</ul>

			<span>-------双向数据绑定------------</span>

			<input v-model="age" type="text">
			<button @click="handle2">提交</button>
			<div>{{number}}</div>
		</div>


		<!-- <div>{{message1}}</div> -->
	</div>
</body>
<script>
	const {
		createApp,
		ref,
		reactive
	} = Vue
	const message = "hello cheng";
	const message1 = "1";
	const message2 = "<div style='color:red'>liang</div>"
	
	const url = "https://img.mukewang.com/szimg/5ed0e7f409a33c9d08060364.jpg"
	const aurl = "https://www.baidu.com"

	const attr = "id"

	const flag = false

	const list = [1,2,3,4]

	const age = ref(18) //绑定一个变量的话 使用 ref
	var number = ref(1);
 
	const profile = reactive({ //绑定一个object的话,使用reactive
		age: 18
	})

	const app = {
		setup() { //他是一个函数，函数的入口。组合很多的组件
			function handle() {
				alert("1")
			}
			
			function handle1() {
				console.log(1)
			}

			function handle2(event) {
				console.log(age.value)
			}

			setTimeout(() => {
				console.log("开始数据更改")
				number.value = 2
			},5000)

			return {
				message,
				message1,
				message2,
				url,
				aurl,
				attr,
				handle,
				age,
				handle1,
				handle2,
				flag,
				list,
				number,
				book: {
					"title": "著作",
					"name": "cheng",
					"localname": "永恒"
				}
			}
		}
	}

	createApp(app).mount("#app")


	// optionAPI
	// const vm = new Vue({
	// 	el: "#app",
	// 	data: {
	// 		message
	// 	},
	// 	templte: {}
	// });
</script>

</html>